Criar um tema customizado na minestore é muito fácil. Você só precisa ter conhecimentos básicos de HTML, CSS, Javascript e um pouco de lógica de programação. Veja um tema base da minestore com os comentários gerais do que cada tag faz e como se comporta. No final, tem uma explicação mais detalhada sobre cada uma dessas tags :)
Tema exemplo com exemplo de utilização das tags
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 |
<!DOCTYPE html> <html> <head> <!-- // campos personalizados --> <!-- campo personalizado que retorna um texto --> <meta name="text:Facebook" content=""/> <!-- campo personalizado que retorna verdadeiro ou falso --> <meta name="if:Usar fundo escuro" content="0"/> <!-- campo personalizado que retorna a URL da imagem que foi inserida pelo editor de temas --> <meta name="image:Imagem de compartilhamento" content=""/> <!-- campo personalizado que retorna um código hexadecimal de cor, inserido no editor de temas pelo colorpicker --> <meta name="color:Página – Texto " content="#000"/> <!-- campo personalizado que exibe um select no editor de temas e retorna o valor 'content' da opção escolhida no editor --> <meta name="select:Textura de fundo" title="Ahoy" content="ahoy.jpg" /> <meta name="select:Textura de fundo" title="Alchemy" content="alchemy.jpg" /> <meta name="select:Textura de fundo" title="Asteroids" content="asteroids.jpg" /> <meta name="select:Textura de fundo" title="Celebration" content="celebration.jpg" /> <!-- seus arquivos CSS devem ser hospedados em um servidor externo, ou inserido em um bloco <style></style> neste mesmo arquivo --> <link rel="stylesheet" href="http://SeuServidorExterno.com.br/style.css"> <!-- seus arquivos Javascript devem ser hospedados em um servidor externo, ou inserido em um bloco <script></script> neste mesmo arquivo --> <script src="http://SeuServidorExterno.com.br/scritps.js"></script> </head> <body class="{{#if theme.usar_fundo_escuro}}dark{{/if}}"> <!-- Verifica o valor do campo personalizado "Usar fundo escuro", ser for verdadeiro, inserir a classe 'dark' no body --> <div class="header"> <div class="header-container"> {{#if theme.logo}} <!-- verifica se o usuário inseriu algum logotipo pelo editor de temas --> <a class="logo" href="{{store_url}}"> <!-- retorna a URL da loja--> <img src='{{resize_image theme.logo "140x60"}}' data-at2x='{{resize_image theme.logo "280x120"}}' alt="{{store_name}}"> <!-- redimensiona o logotipo inserido para 140x60px --> </a> {{else}} <a class="logo text" href="{{store_url}}"> {{#if theme.nome_da_loja}} <!-- verifica se o usuário preencheu o campo custom 'nome da loja' no editor --> {{theme.nome_da_loja}} <!-- retorna no nome da loja --> {{else}} <!-- se não preencheu o campo custom --> {{store_name}} <!-- retorna o nome da loja padrão do painel minestore --> {{/if}} </a> {{/if}} <ul class="nav"> <li class="{{#if all_products_page}}selected{{/if}}"> <!-- se estiver na página 'Produtos' inserir a classe 'selected' --> <a href="{{products_url}}">produtos</a> </li> {{#each pages}} <!-- faz um loop de todas as páginas existentes --> <li class="{{#if is_current}}selected{{/if}}"> <!-- se é a página ativa, inserir uma classe 'selected' --> <a href="{{url}}">{{title}}</a> </li> {{/each}} <li class="cart {{#is_cart_page}}selected{{/is_cart_page}}"> <a href="{{cart_url}}"> carrinho {{#if cart_has_items}} ({{cart_count}}) {{/if}} </a> </li> <li> {{{search_form}}} <!-- renderiza formulário de busca --> <i id="search-button" class="fa fa-search"></i> </li> </ul> </div> </div> <div class="main"> <ul class="nav categories {{#if all_products_page}}show{{/if}}{{#each categories}}{{#if is_current}}show{{/if}}{{/each}}"> <li class="{{#if all_products_page}}selected{{/if}}"> <a href="{{products_url}}">produtos</a> </li> {{#each categories}} <li class="{{#if is_current}}selected{{/if}}"> <a href="{{url}}">{{label}}</a> </li> {{/each}} </ul> {{#each categories}} <!-- faz um loop por todas categorias --> {{#if is_current}} {{#if has_children}} <!-- verifica se a categoria tem subcategorias --> <ul class="nav subcategories"> {{#each children}} <li class="{{#if is_current}}selected{{/if}}"> <a href="{{url}}">{{label}}</a> <!-- exibe o nome da categoria --> </li> {{/each}} </ul> {{/if}} {{/if}} {{/each}} {{#not_found_page}} <!-- se a página não existir --> <div class="list_page"> <h1 class="information"> Página não encontrada </h1> </div> {{/not_found_page}} {{minestore_messages}} <!-- alertas e notificações. ex: produto adicionado/removido do carrinho de compras --> {{#home_page}} <!-- se for a página inicial --> {{#if theme.banner_1_imagem}} <!-- verifica se o campo custom 'Banner 1 Imagem' foi preenchido --> <div class="banner"> <div><a href="{{theme.banner_1_link}}"> <img src='{{resize_image theme.banner_1_imagem "1300x>"}}' data-at2x='{{resize_image theme.banner_1_imagem "2600x>"}}'> </a></div> {{#if theme.banner_2_imagem}} <div><a href="{{theme.banner_2_link}}"> <img src='{{resize_image theme.banner_2_imagem "1300x>"}}' data-at2x='{{resize_image theme.banner_2_imagem "2600x>"}}'> </a></div> {{/if}} {{#if theme.banner_3_imagem}} <div><a href="{{theme.banner_3_link}}"> <img src='{{resize_image theme.banner_3_imagem "1300x>"}}' data-at2x='{{resize_image theme.banner_3_imagem "2600x>"}}'> </a></div> {{/if}} {{#if theme.banner_4_imagem}} <div><a href="{{theme.banner_4_link}}"> <img src='{{resize_image theme.banner_4_imagem "1300x>"}}' data-at2x='{{resize_image theme.banner_4_imagem "2600x>"}}'> </a></div> {{/if}} {{#if theme.banner_5_imagem}} <div><a href="{{theme.banner_5_link}}"> <img src='{{resize_image theme.banner_5_imagem "1300x>"}}' data-at2x='{{resize_image theme.banner_5_imagem "2600x>"}}'> </a></div> {{/if}} </div> {{/if}} {{/home_page}} {{#list_page}} <!-- se for uma página de listagem de produtos como: Produtos, Categoria, Resultado de busca... --> <div class="list_page"> {{#search_page}}<!-- se estiver numa página de resultado de busca --> <h1 class="information"> pesquisando <span>{{search_term}}</span> <!-- exibe o termo que foi pesquisado --> </h1> {{/search_page}} {{#if all_products_page}} <!-- se for a página 'Produtos' --> <h1>Produtos</h1> {{/if}} {{#home_page}} <!-- se for na página incial --> <h1>{{theme.titulo_da_lista_destaque}}</h1> <!-- retorna o valor do campo custom 'Titulo da lista destaque' --> {{/home_page}} <div class="products"> {{#each products}} <!-- faz um loop por todos produtos --> <a href="{{url}}" class="product {{#if out_of_stock}}out_of_stock{{/if}}"> <!-- verifica se o produto está fora de estoque, se tiver, adiciona a classe 'out_of_stock' --> <div class="image"> {{#with primary_image}} <!-- retorna a imagem principal do produto --> <img src='{{resize_image this "470x470#"}}' data-at2x='{{resize_image this "940x940#"}}' alt="{{title}}"> {{/with}} </div> <div class="info"> <div class="info-container"> <span class="title">{{title}}</span> <!-- retorna o título do produto--> <br/> {{#if in_stock}} <!-- verifica se o produto tem estoque --> <div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div class="old-price {{#unless offer_avaliable}}hide{{/unless}}" itemprop="highPrice"> <!-- verifica se o produto está em promoção, se não estiver, adiciona a classe 'hide' para esconder o preço promocional --> {{original_price_with_currency}} <!-- exibe preço original fora da promoção --> </div> <div class="price-value" itemprop="lowPrice"> {{price_with_currency}} <!-- exibe o preço promocianal --> </div> </div> {{/if}} {{#if out_of_stock}} <span class="price out_of_stock">Não disponível</span> {{/if}} </div> </div> </a> {{/each}} </div> {{{paginate}}} </div> {{/list_page}} {{#product_page}} <!-- página interna do produto --> {{#with product}} <div class="product_page" itemscope itemtype="http://schema.org/Product"> <div class="details"> <div class="details-container"> <h1 itemprop="name">{{title}}</h1> <!-- título do produto --> {{#add_to_cart}} <!-- bloco de formulário para adicionar produto no carrinho --> {{#if has_multiple_variants}} <!-- verifica se o produto possui variações. ex: tamanho, cor, etc... --> <div class="variations_container"> {{variations_select}} <!-- exibe o select com as variações disponiveis --> </div> {{else}} {{variations_select}} {{/if}} <div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div class="old-price {{#unless offer_avaliable}}hide{{/unless}}" itemprop="highPrice"> {{original_price_with_currency}} <!-- exibe preço original --> </div> <div class="price-value" itemprop="lowPrice"> {{price_with_currency}} <!-- exibe preço promocional --> </div> {{#if out_of_stock}} <!-- verifica se o produto tem estoque --> <div class="out_of_stock"> Este produto não está disponível </div> {{/if}} {{#if out_of_stock}} <link itemprop="availability" href="http://schema.org/OutOfStock"> {{else}} <link itemprop="availability" href="http://schema.org/InStock"> {{/if}} </div> <div class="description"> {{{description}}} <!-- exibe a descrição do produto --> </div> <div class="add_to_cart"> {{#add_to_cart_button}} <!-- exibe o botão de adicionar produto no carrinho --> comprar {{/add_to_cart_button}} </div> {{/add_to_cart}} </div> </div> <div class="images"> {{#each images}} <!-- loop de imagens do produto --> <img itemprop="image" src='{{resize_image this "1300x>"}}' data-at2x='{{resize_image this "2600x>"}}'> {{/each}} </div> </div> {{/with}} {{/product_page}} {{#cart_page}} <!-- se for a página do carrinho de compras --> <div class="cart_page"> <h1 class="information"> {{information}} <!-- retorna mensagens/alertas do carrinho. ex: produto adicionado/removido do carrinho --> </h1> <div class="container"> {{#with cart}} {{#cart_form_tag}} <!-- incia o form da página de carrinho --> <table> <tr> <th>Produto</th> <th class="quantity">Qtd.</th> <th class="price">Preço</th> <th class="total_price">Total</th> </tr> {{#each line_items}} <!-- faz um loop de todos produtos adicionados no carrinho --> <tr> <td class="title"> {{#link_to_product}}{{title}}{{/link_to_product}} <!-- exibe nome do produto com link para página do produto --> {{#remove_line_item_link}}(remover){{/remove_line_item_link}} <!-- exibe link para remover o produto do carrinho --> </td> <td class="quantity">{{{quantity_input_field}}}</td> <!-- campo de quantidade do produto --> <td class="unit-price"> {{#if has_discount}} <!-- verifica se o produto esta em alguma promoção --> <div class="price"> <div class="old-price">{{ unit_price_without_discount }}</div> <!-- exibe preço sem desconto --> <div class="price-value">{{ unit_price }}</div> <!-- preço com desconto --> </div> {{else}} <!-- se não tiver nenhuma promoção --> <div class="price"> <div class="price-value">{{ unit_price }}</div> <!-- exibe preço normal--> </div> {{/if}} </td> <td class="total_price">{{total_price}}</td> </tr> {{/each}} </table> {{ shipping_fields }} <!-- renderiza campo de calculo de frete --> {{#if is_shipping_calculated}} <!-- verifica se o frete foi calculado --> <div class="subtotal"> <p>{{ shipping_price }}</p> <!-- retorna o valor do frete calculado --> <p>Frete</p> </div> {{/if}} {{#if has_discount}} <!-- verifica se tem alguma promoção ativa --> <div class="cart-resume subtotal"> <strong>Subtotal:</strong> <span>{{ subtotal_price }}</span> <!-- exibe valor sem desconto--> </div> <div class="cart-resume discount"> <strong>Desconto:</strong> <span>{{ total_discount_price }}</span> <!-- exibe valor do desconto --> </div> {{/if}} <div class="cart-resume total"> <strong>Total:</strong> <span>{{ total_price }}</span> <!-- valor total do carrinho --> </div> {{#submit_cart_form_tag}}fechar pedido{{/submit_cart_form_tag}} <!-- botão de fechar pedido e iniciar checkout --> {{/cart_form_tag}} {{/with}} </div> </div> {{/cart_page}} {{#sobre_page}} <!-- se for a página Sobre --> <div class="page"> <div class="container"> <h1> Sobre </h1> {{{store_description}}} <!-- retorna descrição da loja, que o usuário preenche pela tela de configurações gerais --> </div> </div> {{/sobre_page}} {{#termos_page}} <!-- se for a página Termos de Uso --> <div class="page"> <div class="container"> <h1> Termos de Uso </h1> {{{store_terms}}} <!-- retorna os termos de uso escritos pelo painel da minestore --> </div> </div> {{/termos_page}} </div> <div class="footer"> <a class="termos" href="/termos">Termos de Uso</a> {{#if theme.facebook}}<!-- verifica se existe algum valor no campo custom Facebook --> <a href="{{theme.facebook}}"> <!-- retorna valor do campo custom Facebook --> <i class="fa fa-facebook-square"></i> </a> {{/if}} {{#if theme.google_plus}} <a href="{{theme.google_plus}}"> <i class="fa fa-google-plus-square"></i> </a> {{/if}} {{#if theme.twitter}} <a href="{{theme.twitter}}"> <i class="fa fa-twitter-square"></i> </a> {{/if}} {{#if theme.instagram}} <a href="{{theme.instagram}}"> <i class="fa fa-instagram"></i> </a> {{/if}} {{#if theme.flickr}} <a href="{{theme.flickr}}"> <i class="fa fa-flickr"></i> </a> {{/if}} {{#if theme.pinterest}} <a href="{{theme.pinterest}}"> <i class="fa fa-pinterest-square"></i> </a> {{/if}} {{#if theme.tumblr}} <a href="{{theme.tumblr}}"> <i class="fa fa-tumblr-square"></i> </a> {{/if}} {{#if theme.vimeo}} <a href="{{theme.vimeo}}"> <i class="fa fa-vimeo-square"></i> </a> {{/if}} {{#if theme.youtube}} <a href="{{theme.youtube}}"> <i class="fa fa-youtube"></i> </a> {{/if}} </div> </body> </html> |
Páginas
Lista de produtos
Página que exibe uma lista dos produtos de uma categoria específica, de uma busca, ou de todos os produtos da loja.
{{#list_page}} Tag de abertura da página de listagem de produtos.{{#each products}} Iterar sobre os produtos da lista.
{{#with primary_image}} Imagem principal do produto.
{{#each images}} Iterar sobre todas as imagens do produto.
{{this}} URL da imagem aberta.
{{title}} Título do produto.
{{price_with_currency}} Preço do produto.
{{original_price_with_currency}} Preço promocional do produto, quando há alguma promoção ativa.
{{#if in_stock}} Verifica se o produto tem estoque. Aceita {{else}} para indicar que o produto está fora de estoque.
{{paginate}} Paginação da lista.
{{#search_page}} Mostra o conteúdo do blog se a lista for resultado de uma busca.
{{search_term}} Termo usado na busca.
Estrutura exemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
{{#list_page}} {{#search_page}}<!-- se estiver numa página de resultado de busca --> {{search_term}}<!-- exibe o termo que foi pesquisado --> {{/search_page}} {{#each products}} <!-- faz um loop por todos produtos --> <a href="{{url}}" class="product {{#if out_of_stock}}out_of_stock{{/if}}"> <!-- verifica se o produto está fora de estoque, se tiver, adiciona a classe 'out_of_stock' --> <div class="image"> {{#with primary_image}} <!-- retorna a imagem principal do produto --> <img src='{{resize_image this "470x470#"}}' data-at2x='{{resize_image this "940x940#"}}' alt="{{title}}"> {{/with}} </div> <div class="info"> {{title}} <!-- retorna o título do produto--> {{#if in_stock}} <!-- verifica se o produto tem estoque --> {{original_price_with_currency}} <!-- exibe preço original fora da promoção --> {{price_with_currency}} <!-- exibe o preço promocianal --> {{/if}} {{#if out_of_stock}} Fora de estoque {{/if}} </div> </a> {{/each}} {{{paginate}}} <!-- retorna paginação dos produtos --> {{/list_page}} |
Produto
Página que exibe os detalhes de um produto.
{{#product_page}} Abertura da tag da página do produto.{{#with product}} Abertura da tag do produto.
{{url}} URL da página do produto.
{{#with primary_image}} Imagem principal do produto.
{{#each images}} Iterar sobre todas as imagens do produto.
{{this}} URL da imagem aberta.
{{#add_to_cart}} Abertura da tag com as informações do produto.
{{variations_select}} Seletor de variações do produto.
{{price_with_currency}} Preço do produto selecionado.
{{original_price_with_currency}} Preço promocional do produto, quando há alguma promoção ativa.
{{#if in_stock}} Verifica se o produto tem estoque. Aceita {{else}} para indicar que o produto está fora de estoque.
{{#add_to_cart_button}} Botão para adicionar o produto no carrinho. É exibido apenas se o produto estiver em estoque. Conteúdo do bloco define o texto do botão.
{{description}} Descrição do produto.
Estrutura exemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
{{#product_page}} {{#with product}} {{url}} {{#with primary_image}} <img src="{{this}}" alt="{{title}}"> {{/with}} {{#each images}} <img src="{{this}}" alt="{{title}}"> {{/each}} {{title}} {{#add_to_cart}} {{variations_select}} <div> <span>De: {{original_price_with_currency}}</span> <span>Por: {{price_with_currency}}</span> {{#if in_stock}} Produto em estoque {{else}} Produto fora de estoque {{/if}} </div> {{#add_to_cart_button}} Adicionar ao Carrinho {{/add_to_cart_button}} {{{description}}} {{/add_to_cart}} {{/with}} {{/product_page}} |
Carrinho de compras
Página que exibe o carrinho e o botão de fechamento de pedido.
{{information}} Exibe informações sobre o carrinho.
{{#with cart}} Exibe o carrinho.
{{#cart_form_tag}} Abertura da tag do carrinho.
{{#each line_items}} Iterar sobre os produtos do carrinho.
{{title}} Título do produto.
{{#remove_line_item_link}} Link para remover item do carrinho. Conteúdo do bloco define o texto do link.
{{#link_to_product}} URL do produto.
{{unit_price}} Preço da unidade do produto. Se o produto estiver com preço promocional, a tag para exibir pro preço original é {{ unit_price_without_discount }} {{quantity_input_field}} Quantidade de unidades do produto.
{{total_price}} Valor total da quantidade do produto indicado quando dentro do bloco {{#each line_items}} ou valor total do carrinho quando dentro do bloco {{#cart_form_tag}} .
{{#submit_cart_form_tag}} Botão para fechar pedido. Conteúdo do bloco define o texto do botão.
{{ shipping_fields }} Renderiza o formulário para calculo de frete no carrinho.
{{#if is_shipping_calculated }} Verifica se o frete já foi calculado no carrinho.
{{ shipping_price }} Preço do frete calculado.
{{#if has_discount}} Verifica se tem algum desconto por promoção ou promocode.
{{ subtotal_price }} Retorna o preço total do carrinho sem desconto.
{{ total_discount_price }} Retorna o valor total de descontos no carrinho.
Estrutura exemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
{{#cart_page}} {{information}} {{#with cart}} {{#cart_form_tag}} {{#each line_items}} {{title}} {{#remove_line_item_link}} {{/remove_line_item_link}} {{#link_to_product}} {{/link_to_product}} de: {{ unit_price_without_discount }} por: {{unit_price}} {{quantity_input_field}} {{total_price}} {{/each}} {{ shipping_fields }} {{#if is_shipping_calculated }} {{ shipping_price }} {{/if}} {{#if has_discount}} {{ subtotal_price }} {{ total_discount_price }} {{/if}} {{total_price}} {{#submit_cart_form_tag}}{{/submit_cart_form_tag}} {{/cart_form_tag}} {{/with}} {{/cart_page}} |
Páginas adicionais
Criar página adicional com qualquer conteúdo que você desejar:
{{#nome_da_pagina_page}} O nome da página é definido pelo termo que vem antes de _page . Se for necessário usar um termo que contenha espaços, o espaço deve ser substituído por um _ (underline) entre as palavras. Por exemplo: a página “Camisetas Masculinas” é definida pela presença da tag {{#camisetas_masculinas_page}}.Estrutura exemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{{#contato_page}} <article class="contato_page"> <h1>Contato</h1> <p class="links"> <br> <a href="http://www.facebook.com/seufacebook">FACEBOOK</a> <br> <a href="http://instagram.com/seuinstragram">INSTAGRAM</a> <br> </p> </article> {{/contato_page}} |
Página não encontrada
Conteúdo de página não encontrada.
{{#not_found_page}} Define o conteúdo exibido quando o usuário tenta acessar uma página que não existe.Estrutura exemplo:
|
1 2 3 4 5 |
{{#not_found_page}} <div class="alert"> Página não encontrada </div> {{/not_found_page}} |
Elementos
Menu
Tags usadas para compor o menu, como links para as páginas da loja e campo de busca.
{{#each categories}} Itera sobre as categorias.{{#each children}} Itera sobre as subcategorias.
{{#each pages}} Itera sobre as páginas customizadas.
{{url}} URL da categoria, subcategoria ou página.
{{label}} Nome da categoria ou subcategoria.
{{title}} Título da página.
{{#if is_current}} Renderiza o conteúdo do bloco se a página da categoria ou subcategoria estiver sendo exibida.
{{products_url}} URL da página com todos os produtos da loja.
{{cart_url}} URL do carrinho.
{{#if cart_has_items}} Renderiza o conteúdo do bloco se o carrinho possuir items.
{{cart_count}} Número de ítens no carrinho.
{{search_form}} Exibe formulário de busca de produtos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<ul class="nav"> <li class="{{#if all_products_page}}selected{{/if}}"> <a href="{{products_url}}">produtos</a> </li> {{#each pages}} <li class="{{#if is_current}}selected{{/if}}"> <a href="{{url}}">{{title}}</a> </li> {{/each}} <li class="cart {{#is_cart_page}}selected{{/is_cart_page}}"> <a href="{{cart_url}}"> carrinho {{#if cart_has_items}} ({{cart_count}}) {{/if}} </a> </li> <li> {{{search_form}}} <i id="search-button" class="fa fa-search"></i> </li> </ul> |
Avisos
Controles de exibição de imagens no editor de temas da minestore.
{{minestore_messages}} Tag necessária para informar ações do usuários e quaisquer problemas ocorridos.{{information}} Tag que deve ser incluída dentro da {{#cart_page}} para informações sobre o carrinho.
Imagens
Informações para o usuário e o administrador da loja.
{{resize_image imagem "larguraxaltura"}} Você pode redimensionar qualquer imagem usando a tag resize_image . A imagem pode ser uma URL externa com aspas, um indicador de uma tag pai aberta com this ou uma imagem dinâmica inserida pelo editor de temas com a tag theme.nome_da_tag. O segundo parâmetro larguraxaltura define o tamanho da imagem e como ela é cortada.Exemplos de usos da ferramenta de redimensionamento
'400x300' Redimensionar mantendo a proporção.'400x300!' Forçar redimensionamento na proporção indicada.
'400x' Redimensionar largura, mantendo a proporção.
'x300' Redimensionar altura, mantendo a proporção.
'400x300<' Redimensionar apenas se a imagem for menor do que o indicado.
'400x300>' Redimensionar apenas se a imagem for maior do que o indicado.
'50x50%' Redimensionar largura e altura para 50%.
'400x300#' Redimensionar, cortar se necessário para manter a proporção (gravidade central).
'400x300#ne' Redimensionar, cortar se necessário para manter a proporção (gravidade nordeste).
'400x300+50+100' Cortar 400×300 do ponto 50 de largura e 100 de altura.
Aplicação das tags
|
1 2 3 4 5 6 7 8 |
<!-- Renderiza a logo do Google para que caiba dentro de uma área de 400x300px. --> {{resize_image "https://www.google.com/images/srpr/logo11w.png" "400x300"}} <!-- Renderiza a logo do tema para que tenha 400px de largura. --> {{resize_image theme.logo "400x"}} <!-- Renderiza a imagem principal de um produto para que tenha 300px de altura. --> {{#with primary_image}} <img src="{{resize_image this "x300"}}"> {{/with}} |
